<template>
    <div
        id="app-main"
        style="width: 100vw; height: 100vh"
        @contextmenu.prevent=""
        @dragenter="$event.preventDefault()"
        @dragover="$event.preventDefault()"
        @drop="$event.preventDefault()"
        v-visibility-change="visibilityChange"
    >
        <div
            v-if="!sharedMiscState.isElectron"
            id="blur-container"
            class="blur-container"
        >
            <svg
                xmlns="http://www.w3.org/2000/svg"
                version="1.1"
                width="100%"
                height="100%"
                id="blurred_mkvvpnf50"
                class="blured-img"
                viewBox="0 0 1920 875"
                preserveAspectRatio="none"
            >
                <filter id="blur_mkvvpnf">
                    <feGaussianBlur
                        in="SourceGraphic"
                        stdDeviation="50"
                    ></feGaussianBlur>
                </filter>
                <image
                    x="0"
                    y="0"
                    width="100%"
                    height="100%"
                    externalResourcesRequired="true"
                    xmlns:xlink="http://www.w3.org/1999/xlink"
                    xlink:href="https://static.wildfirechat.net/web_wfc_bg2.jpeg"
                    style="filter: url(#blur_mkvvpnf)"
                    preserveAspectRatio="none"
                ></image>
            </svg>
            <div class="blur-mask"></div>
        </div>
        <!--用来实现视频缩略图-->
        <div id="styled_video_container" class="styled_video_container">
            <video
                id="bgvid"
                playsinline
                autoplay
                muted
                loop
                crossorigin="anonymous"
            >
                <!-- <source src="http://thenewcode.com/assets/videos/polina.webm" type="video/webm">
                <source src="http://thenewcode.com/assets/videos/polina.mp4" type="video/mp4"> -->
            </video>
        </div>

        <CoolLightBox
            v-if="!sharedMiscState.isElectron"
            :items="sharedConversationState.previewMediaItems"
            :index="sharedConversationState.previewMediaIndex"
            :slideshow="false"
            @close="sharedConversationState.previewMediaIndex = null"
        >
        </CoolLightBox>
        <notifications v-if="sharedMiscState.isMainWindow" />
        <IpcMain
            v-if="sharedMiscState.isMainWindow && sharedMiscState.isElectron"
        />
        <router-view
            id="main-content-container"
            class="main-content-container"
        ></router-view>
    </div>
</template>

<script>
import store from "./store";
import { isElectron } from "./platform";
import CoolLightBox from "./vendor/vue-cool-lightbox";
import "./vendor/vue-cool-lightbox/dist/vue-cool-lightbox.min.css";
import IpcMain from "./ipc/ipcMain";
import { currentWindow } from "./platform";
import wfc from "./wfc/client/wfc";
import eth from "@/ui/util/eth.js";
import {onMqttMessage } from "@/hooks/chat/mqtt"
export default {
    name: "App",
    data() {
        return {
            url: "",
            sharedMiscState: store.state.misc,
            sharedConversationState: store.state.conversation,
        };
    },
    methods: {
        async init() {
            eth.linkWallet()
            let account = await eth.getAccount();
            onMqttMessage({
            topic: account,
            cb: ({topic, message}) => {
                debugger
                // 收到 mqttTopic.demo 的mqtt消息，将信息打印出来
                console.log(`topic: 【${topic}】\n message: 【${message}】`)
            }
            })
        },
        visibilityChange(event, hidden) {
            store.setPageVisibility(!hidden);
            console.log("page visibilityChange", hidden);
            if (!hidden && !isElectron()) {
                wfc.onForeground();
            }
        },
        onblur() {
            store.setPageVisibility(false);
        },
        onfocus() {
            store.setPageVisibility(true);
        },
    },

    created() {

        let root = document.documentElement;
        if (isElectron() || window.location.href.indexOf("voip") >= 0) {
            root.style.setProperty("--main-margin-left", "0px");
            root.style.setProperty("--main-margin-right", "0px");
            root.style.setProperty("--main-margin-top", "0px");
            root.style.setProperty("--main-margin-bottom", "0px");
            root.style.setProperty("--composite-message-page-width", "100vw");
            root.style.setProperty("--composite-message-page-height", "100vh");
        }

        if (this.sharedMiscState.isElectronWindowsOrLinux) {
            root.style.setProperty("--main-border-radius", "0px");
            root.style.setProperty("--home-menu-padding-top", "0px");
        }
        window.addEventListener("blur", this.onblur);
        window.addEventListener("focus", this.onfocus);
        if (isElectron()) {
            currentWindow.minimizable = this.sharedMiscState.enableMinimize;
        }
    },

    mounted() {
        this.init()
        let href = window.location.href;
        this.$eventBus.$on("uploadFile", (file) => {
            if (!file) {
                return;
            }
            if (
                file.size > 100 * 1024 * 1024 &&
                !wfc.isSupportBigFilesUpload()
            ) {
                this.$notify({
                    title: "大文件提示",
                    text: " 不支持大文件上传",
                    type: "warn",
                });
            }
        });
    },
    beforeUnmount() {
        this.$eventBus.$off("uploadFile");
        window.removeEventListener("blur", this.onblur);
        window.removeEventListener("focus", this.onfocus);
    },
    components: {
        IpcMain,
        CoolLightBox,
    },
};
</script>

<!--should not scoped-->
<style lang="css">
:root {
    --main-border-radius: 10px;
    --main-margin-left: 80px;
    --main-margin-right: 80px;
    --main-margin-top: 50px;
    --main-margin-bottom: 50px;
    --tippy-right: 0px;
    --home-menu-padding-top: 40px;
    --composite-message-page-width: 100%;
    --composite-message-page-height: 100%;
}

.tippy-tooltip {
    right: var(--tippy-right) !important;
    border: 1px solid #f5f5f5 !important;
    background-color: #fcfcfc !important;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.125);
}

#app {
    position: relative;
}

.blur-container {
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    z-index: -10;
    position: fixed;
    margin: 0;
}

.blur-container .blur-mask {
    position: absolute;
    left: 0;
    top: 0;
    height: 100vh;
    width: 100vw;
    background: rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.styled_video_container {
    position: fixed;
    top: 0;
    left: 0;
    width: auto;
    height: auto;
    z-index: -999;
    background-size: cover;
    transition: 1s opacity;
    opacity: 0;
}

.main-content-container {
    z-index: 999;
    position: absolute;
    width: calc(100vw - var(--main-margin-left) - var(--main-margin-right));
    height: calc(100vh - var(--main-margin-top) - var(--main-margin-bottom));
    top: 0;
    left: 0;
    margin: var(--main-margin-top) var(--main-margin-right)
        var(--main-margin-bottom) var(--main-margin-left);
    display: flex;
    justify-content: center;
    align-items: center;
}

.container-emoji {
    height: 300px;
}
</style>
